<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>参数列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片 -->
        <el-card>
            <el-alert title="注意:只允许为第三级分类设置参数!" type="warning" show-icon :closable="false">
            </el-alert>
            <el-row class="row_top">
                <span>选择商品分类 : </span>
            <!-- 级联选择框 -->
            <!-- v-model选中的值 options 数据源  props 配置对象-->
            <el-cascader v-model="isValue"
                        expandTrigger='hover'
                        :options="catelist"
                        :props="cateProps"
                        @change="handleChange">
             </el-cascader>
             <!-- tabs标签页 -->
             <!--v-model 选中选项卡的 name     @tab-click tab 被选中时触发-->
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="动态参数" name="many">
                    <el-button type="primary" size="small" :disabled="isBtnDisabled" @click="showAddDialog=true">添加参数</el-button>
                    <!-- 动态表格 -->
                <el-table :data="manyTableData" border style="width: 100%">
                 <!-- 展开行 -->
                  <el-table-column type="expand">
                        <template slot-scope="scope">
                          <el-tag  v-for="(item,i) in scope.row.attr_vals" :key="i">{{item}}</el-tag>
                      </template>
                  </el-table-column>
                 <!-- 索引列 -->
                  <el-table-column type="index"></el-table-column>
                  <el-table-column prop="attr_name" label="参数名称"></el-table-column>
                  <el-table-column label="操作">
                      <template slot-scope="scope">
                           <el-button type="primary" icon="el-icon-edit" size="small" @click="revParams(scope.row.attr_id)">编辑</el-button>
                           <el-button type="danger" icon="el-icon-search" size="small" @click="delParams(scope.row.attr_id)">删除</el-button>
                      </template>
                  </el-table-column>
                </el-table>
                </el-tab-pane>
                <el-tab-pane label="静态属性" name="only">
                    <el-button type="primary" size="small" :disabled="isBtnDisabled" @click="showAddDialog=true">添加属性</el-button>
                    <!-- 静态表格 -->
                <el-table :data="onlyTableData" border style="width: 100%">
                    <!-- 展开行 -->
                  <el-table-column type="expand">
                      <template slot-scope="scope">
                          <el-tag  v-for="(item,i) in scope.row.attr_vals" :key="i">{{item}}</el-tag>
                      </template>
                  </el-table-column>
                   <!-- 索引列 -->
                  <el-table-column type="index"></el-table-column>
                  <el-table-column prop="attr_name" label="属性名称"></el-table-column>
                  <el-table-column label="操作">
                      <template slot-scope="scope">
                           <el-button type="primary" icon="el-icon-edit" size="small" @click="revParams(scope.row.attr_id)">编辑</el-button>
                           <el-button type="danger" icon="el-icon-search" size="small" @click="delParams(scope.row.attr_id)">删除</el-button>
                      </template>
                  </el-table-column>
                </el-table>                    
                </el-tab-pane>
            </el-tabs>
            </el-row>
        </el-card>
        <!-- 添加参数的对话框 -->
        <el-dialog
        :title="'添加' + text"
        :visible.sync="showAddDialog"
        width="50%"
        @close='cerAddDialog'
        >
        <el-form :model="addParamsForm" :rules="addParamsFormRules" ref="addParamsFormRef" label-width="100px">
        <el-form-item :label="text" prop="attr_name">
            <el-input v-model="addParamsForm.attr_name"></el-input>
        </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="showAddDialog = false">取 消</el-button>
            <el-button type="primary" @click="addParams">确 定</el-button>
        </span>
        </el-dialog>

        <!-- 修改参数的对话框 -->
        <el-dialog
        :title="'修改' + text"
        :visible.sync="showRevDialog"
        width="50%"
        @close="cerRevDialog"
        >
        <el-form :model="RevParamsForm" :rules="RevParamsFormRules" ref="RevParamsFormRef" label-width="100px">
        <el-form-item :label="text" prop="attr_name">
            <el-input v-model="RevParamsForm.attr_name"></el-input>
        </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="showRevDialog = false">取 消</el-button>
            <el-button type="primary" @click="revOk">确 定</el-button>
        </span>
        </el-dialog>       
    </div>
</template>

<script>
export default {
    data () {
        return {
            //商品分类数据
            catelist:[],
            //  级联选择框选中的值
            isValue:[],
            //级联选择框选的配置对象
            cateProps:{
                value:'cat_id',
                label:'cat_name',
                children:'children'
            },
            //   tabs标签页默认选中的名字
            activeName:'many',
            //分类参数列表数据动态表格
            manyTableData:[],
            //分类参数列表数据静态表格
            onlyTableData:[],
            //添加参数的对话框默认状态
            showAddDialog:false,
            //添加参数输入的类容
            addParamsForm:{
                attr_name:''
            },
           //添加参数的表单验证规则
           addParamsFormRules:{
                attr_name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ]               
           },
           //修改默认状态
           showRevDialog:false,
           //点击当前行的默认类容
           RevParamsForm:{
               attr_name:''
           },
           //修改参数的表单验证规则
           RevParamsFormRules:{
                attr_name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ]                
           }
        }
    },
    created () {
      this.getParamsList()
    },
    methods:{
       async getParamsList () {
            const res = await this.$http.get('categories')
            if(res.data.meta.status == 200){
               this.catelist = res.data.data
               console.log(this.catelist)
            }else{
                return this.$message.error('获取商品分类失败');
            }
        },
        //级联选框变化，会触发这个函数
        handleChange () {
           this.getParamsData ()
        },
        //tab页点击事件的处理函数
        handleClick () {
           this. getParamsData ()
            console.log(this.activeName)
        },
       async getParamsData () {
              //项目中只允许选择三级分类
           if(this.isValue.length !==3){
               this.isValue = []
              return
           }else{
               const res = await this.$http.get(`categories/${this.cateID}/attributes`,{params:{sel:this.activeName}})
                 if (res.data.meta.status == 200) {
                     //接口数据是字符串得改成数组来渲染
                    res.data.data.forEach(item=>{
                          item.attr_vals = item.attr_vals.length === 0 ? [] :item.attr_vals.split(',')
                    });
                    console.log(res)
                    if(this.activeName === 'many'){
                      this.manyTableData = res.data.data
                    }else{
                        this.onlyTableData = res.data.data
                    }
                 }else{
                      return this.$message.error('获取参数列表失败');
                 }
           }
        },
        //添加
        addParams () {
          this.$refs.addParamsFormRef.validate(async value=>{
               if(!value){
                   return
               }else{
                   const res = await this.$http.post(`categories/${this.cateID}/attributes`,
                   {
                    attr_name:this.addParamsForm.attr_name,
                    attr_sel:this.activeName
                   })
                     if(res.data.meta.status == 201){
                         this.$message.success('添加成功');
                         this.getParamsData()
                         this.showAddDialog = false
                     }else{
                          return this.$message.error('添加失败');
                     }
               }
          })
        },
        //关闭对添加对话框重置类容
        cerAddDialog () {
          this.$refs.addParamsFormRef.resetFields()
        },
        //点击当前修改按钮获取当前这一行的类容 
       async revParams (id) {
           const res = await this.$http.get(`categories/${this.cateID}/attributes/${id}`,{attr_sel:this.activeName})
             if(res.data.meta.status == 200){
               this.RevParamsForm = res.data.data           
             }else{
                 return this.$message.error('获取数据失败');
             }
           this.showRevDialog = true
        },
        //点击确认修改按钮
        revOk () {
           this.$refs.RevParamsFormRef.validate(async value=>{
               if(!value){
                   return
               }else{
                    const res = await this.$http.put(`categories/${this.cateID}/attributes/${this.RevParamsForm.attr_id}`,
                    {
                        attr_name:this.RevParamsForm.attr_name,
                        attr_sel:this.activeName
                    })
                    if(res.data.meta.status == 200){
                        this.$message.success('修改成功');
                        this.getParamsData()
                        this.showRevDialog = false
                    }else{
                        return this.$message.error('修改失败');
                    }
               }
           })
        },
        //关闭修改对话框重置类容
        cerRevDialog () {
            this.$refs.RevParamsFormRef.resetFields()
        },
        //点击删除
       async delParams (id) {
        const confirm = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err)
           if(confirm == 'cancel'){
               return this.$message.info('取消删除');
           }else{
              const res = await this.$http.delete(`categories/${this.cateID}/attributes/${id}`)
              if(res.data.meta.status == 200){
                   this.$message.success('删除成功');
                   this.getParamsData()
              }else{
                 return this.$message.error('删除失败'); 
              }
           }
        }
    },
    //计算属性
    computed:{
       isBtnDisabled () {
          if (this.isValue.length !== 3) {
              return true
          }else{
              return false
          }
       },
       //当前三级分类id
       cateID () {
          if (this.isValue.length ===3) {
              return this.isValue[2]
          }else{
              return null
          }
       },
       text () {
           if(this.activeName === 'many'){
               return '动态参数'
           }else{
               return '静态参数'
           }
       }
    }
}
</script>

<style lang="less" scoped>
  .row_top{
      margin: 15px 0;
  }
  .el-tag{
      margin: 10px;
  }
  .input-new-tag{
      width: 200px;
  }
</style>